<template>
  <div class="device-form padding-bottom-30">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="100" :class="proportion == 24 ? 'setting' : ''">
        <el-col :span="proportion">
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
          </el-form-item>
          <el-form-item label="所属产品" prop="productName">
            <el-input ref="chooseProInput" readonly v-model="form.productName" placeholder="请选择产品" :disabled="form.status != 1 || proportion == 24">
              <el-button v-if="proportion != 24" slot="append" @click="selectProduct()" :disabled="form.status != 1">选择</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="设备编号" prop="serialNumber">
            <el-input ref="genSerInput" v-model="form.serialNumber" placeholder="请输入设备编号" :disabled="form.status != 1" maxlength="32">
              <el-button v-if="form.deviceType !== 3" slot="append" @click="generateNum" :loading="genDisabled" :disabled="form.status != 1">生成
              </el-button>
              <el-button v-if="form.deviceType === 3" slot="append" @click="genSipID()" :disabled="form.status != 1">生成
              </el-button>
            </el-input>
          </el-form-item>

          <el-form-item label="固件版本" prop="firmwareVersion">
            <el-input v-model="form.firmwareVersion" placeholder="请输入固件版本" type="number" step="0.1" :disabled="form.status != 1 || form.deviceType === 3">
              <template slot="prepend">Version</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="proportion">
          <el-form-item v-if="proportion != 24" label="定位方式" prop="locationWay">
            <el-select v-model="form.locationWay" placeholder="请选择设备定位方式" clearable size="small" style="width: 100%">
              <el-option v-for="dict in dict.type.iot_location_way" :key="dict.value" :label="dict.label" :value="Number(dict.value)" />
            </el-select>
          </el-form-item>
          <el-form-item label="设备坐标" prop="coordinate" v-if="proportion != 24">
            <point-select v-model="form.coordinate" :disabled="form.locationWay != 3"></point-select>
          </el-form-item>
          <el-form-item label="所在地址" prop="networkAddress">
            <el-input v-model="form.networkAddress" placeholder="请输入设备所在地址" :disabled="form.locationWay != 3" />
          </el-form-item>
          <el-row :gutter="10">
            <el-col :span="8" :offset="0">
              <el-form-item label="禁用设备" prop="deviceStatus">
                <el-switch v-model="deviceStatus" active-text="" inactive-text="" :disabled="form.status == 1 || form.deviceType === 3" :active-value="1" :inactive-value="0" active-color="#F56C6C">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="设备影子" prop="isShadow">
                <el-switch v-model="form.isShadow" active-text="" inactive-text="" :active-value="1" :inactive-value="0" :disabled="form.deviceType === 3">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="是否监控" prop="isCamera">
                <el-switch v-model="form.isCamera" active-text="" inactive-text="" :active-value="'1'" :inactive-value="'0'">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item label="地块" prop="landId">
            <el-select
              v-model="form.landId"
              placeholder="请选择地块"
              class="display-block"
              @change="handleLandChange"
            >
              <el-option
                v-for="land in landList"
                :key="land.landId"
                :label="land.landName"
                :value="land.landId"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="入网地址" prop="networkIp">
            <el-input v-model="form.networkIp" placeholder="设备入网IP" disabled />
        </el-form-item>
        <el-form-item label="激活时间" prop="activeTime">
            <el-date-picker clearable v-model="form.activeTime" type="date" value-format="yyyy-MM-dd" placeholder="设备激活时间" disabled style="width:100%">
            </el-date-picker>
        </el-form-item> -->
        </el-col>
      </el-row>
    </el-form>

    <div class="position-absolute padding-tb-10 right-10 bottom-10">
      <el-button type="primary" @click="submitForm" :disabled="!checkPermi(['iot:device:edit'])" v-show="deviceId != 0">确定</el-button>
      <el-button type="primary" @click="submitForm" :disabled="!checkPermi(['iot:device:add'])" v-show="deviceId == 0">确定</el-button>
      <el-button @click="$emit('close')">取消</el-button>

    </div>

    <!-- 选择产品 -->
    <product-list ref="productList" :productId="form.productId" @productEvent="getProductData($event)" />

    <sipid ref="sipidGen" :product="form" @addGenEvent="getSipIDData($event)" />
  </div>
</template>

<script>
import { checkPermi } from '@/utils/permission'; // 权限判断函数
import productList from './product-list';
import sipid from '../sip/sipid-dialog';
import {
  getDevice,
  addDevice,
  updateDevice,
  generatorDeviceNum,
} from '@/api/iot/device';
import PointSelect from './components/PointSelect';
export default {
  name: 'DeviceForm',
  mixins: [],
  components: { productList, sipid, PointSelect },
  props: {
    deviceId: {
      type: [Number, String],
      default: 0,
    },
    proportion: {
      type: Number,
      default: 12,
    },
    deviceInfo: {
      type: Object,
      default: () => ({
        productId: null,
        productName: null,
        deviceType: null,
        tenantId: null,
        tenantName: null,
        coordinate: null,
        locationWay: null,
      }),
    },
  },
  dicts: ['iot_device_status', 'iot_location_way'],
  data() {
    return {
      // 生成设备编码是否禁用
      genDisabled: false,
      // 表单参数
      form: {},
      //地块列表
      landList: [],
      // 表单校验
      rules: {
        deviceName: [
          {
            required: true,
            message: '设备名称不能为空',
            trigger: 'blur',
          },
          {
            min: 2,
            max: 32,
            message: '设备名称长度在 2 到 32 个字符',
            trigger: 'blur',
          },
        ],
        firmwareVersion: [
          {
            required: true,
            message: '固件版本不能为空',
            trigger: 'blur',
          },
        ],
        serialNumber: [
          {
            required: true,
            message: '设备编号不能为空',
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              let reg = /^[0-9a-zA-Z]+$/;
              if (!reg.test(value)) {
                callback(new Error('设备编号只能是字母和数字'));
              }

              callback();
            },
            trigger: 'blur',
          },
        ],
        productName: [
          {
            required: true,
            message: '所属产品不能为空',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  computed: {
    deviceStatus: {
      set(val) {
        if (val == 1) {
          // 1-未激活，2-禁用，3-在线，4-离线
          this.form.status = 2;
        } else if (val == 0) {
          this.form.status = 4;
        } else {
          this.form.status = this.oldDeviceStatus;
        }
      },
      get() {
        if (this.form.status == 2) {
          return 1;
        }
        return 0;
      },
    },
  },
  watch: {
    deviceInfo: {
      handler(value) {
        if (this.deviceId != 0) {
          this.form.coordinate = value.coordinate;
        } else {
          this.form.productId = value.productId;
          this.form.productName = value.productName;
          this.form.deviceType = value.deviceType;
          this.form.tenantId = value.tenantId;
          this.form.tenantName = value.tenantName;
          this.form.coordinate = value.coordinate;
          this.form.locationWay = value.locationWay;
        }
      },
      deep: true,
    },
    deviceId: {
      handler(value) {
        if (value != 0) {
          this.getDevice();
        } else {
          this.reset();
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    /** 权限校验 */
    checkPermi,

    /**获取设备详情*/
    async getDevice() {
      const { deviceId } = this;
      const { data } = await getDevice(deviceId);
      if (data.longitude && data.latitude) {
        data.coordinate = data.longitude + ',' + data.latitude;
      } else {
        data.coordinate = '';
      }
      this.form = data;
    },
    /**选择产品 */
    selectProduct() {
      this.$refs.productList.open = true;
      this.$refs.productList.getList();
    },
    /**获取选中的产品 */
    getProductData(product) {
      this.form.productId = product.productId;
      this.form.productName = product.productName;
      this.form.deviceType = product.deviceType;
      this.form.tenantId = product.tenantId;
      this.form.tenantName = product.tenantName;
      this.$refs.chooseProInput.focus();
    },
    // 生成随机字母和数字
    generateNum() {
      if (!this.form.productId || this.form.productId == 0) {
        this.$modal.alertError('请先选择产品');
        return;
      }
      this.genDisabled = true;
      generatorDeviceNum().then((response) => {
        this.form.serialNumber = response.data;
        this.$refs.genSerInput.focus();
        this.genDisabled = false;
      });
    },
    genSipID() {
      this.$refs.sipidGen.open = true;
    },
    getSipIDData(devsipid) {
      this.form.serialNumber = devsipid;
    },
    // 表单重置
    reset() {
      this.form = {
        deviceId: 0,
        deviceName: null,
        productId: null,
        productName: null,
        isCamera: null,
        tenantId: null,
        tenantName: null,
        serialNumber: null,
        firmwareVersion: 1.0,
        status: 1,
        rssi: null,
        isShadow: null,
        locationWay: 1,
        thingsModelValue: null,
        networkAddress: null,
        networkIp: null,
        coordinate: null,
        // longitude: null,
        // latitude: null,
        activeTime: null,
        summary: null,
        imgUrl: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      };
      this.resetForm('form');
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const { coordinate } = this.form;
          if (coordinate) {
            let _arr = coordinate.split(',');
            this.form.longitude = _arr[0];
            this.form.latitude = _arr[1];
          } else {
            this.form.longitude = '';
            this.form.latitude = '';
          }
          if (this.deviceId != 0) {
            updateDevice(this.form).then((response) => {
              if (response.data == 0) {
                this.$modal.alertError(response.msg);
              } else {
                this.$modal.msgSuccess("修改成功");
                this.form = JSON.parse(JSON.stringify(this.form));
                this.$emit('success');
              }
            });
          } else {
            addDevice(this.form).then((response) => {
              this.form = response.data;
              this.oldDeviceStatus = this.form.status;
              if (this.form.deviceId == null || this.form.deviceId == 0) {
                this.$modal.alertError('设备编号已经存在，添加设备失败');
              } else {
                if (this.form.status == 2) {
                  this.deviceStatus = 1;
                }
                this.$modal.msgSuccess("修改成功");
                this.$emit('success');
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.device-form ::v-deep {
  width: 100%;
  .setting {
    // padding: 0!important;
    margin: 0 !important;
    .el-col {
      padding: 0 !important;
      // margin: 0!important;
    }
  }
}
</style>
